<template>
  <div class="globalzj grayback">
    <van-nav-bar title="选择患者" left-arrow @click-left="onClickLeft" />
    <div class="jtlist">
      <div class="tip">请选择患者</div>
      <div
        class="hz"
        v-for="(item, index) in list"
        :class="ac == index ? 'ac' : ''"
        @click="handle(item,index)"
      >
        <div class="lefthz">
          <div class="hzxx">
            <span class="hzname">{{ item.name }}</span>
            <span class="idcard">{{
              item.idCard.replace(/(.{6}).*(.{4})/, "$1********$2")
            }}</span>
            <span class="moren" v-if="item.defaultFlag == 1">默认</span>
          </div>
          <div class="hznl">
            <span>{{ item.genderValue }}</span>
            <span>{{ item.age }}岁</span>
          </div>
        </div>
        <div class="righthz"></div>
      </div>
       <van-button
      type="danger"
      @click="next"
      style="width: 100%; border-radius: 50px"
      >下一步</van-button
    >
    </div>
   
  </div>
</template>
<script>
import service from "../request";
export default {
  data() {
    return {
      list: [],
      ac: 0,
      id:''
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    handle(item,index) {
        this.id=item.id
      this.ac = index;
    },
    next(){
        this.$router.push({
            path:"/zf",
            query:{
                id:this.list[this.ac].id
            }
        })
    },
    async getdata() {
      const res = await service.get("/patient/mylist");
      console.log(res);
      this.list = res.data;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.ac {
  border: 1px solid red !important;
}
.tip {
  font-size: 10px;
  color: #000;
}
.jtlist {
  width: 100%;
  height: calc(100% - 46px);
  overflow: auto;
  padding: 15px;
  box-sizing: border-box;
}
.add1 {
  text-align: center;
  font-size: 14px;
  color: red;
}
.add {
  text-align: center;
  width: 100%;
  font-size: 19px;
  color: red;
}
.hznl span {
  display: inline-block;
  margin-right: 15px;
}
.hznl {
  color: #c3c3c5;
  margin-top: 10px;
  font-size: 14px;
}
.moren {
  display: inline-block;
  padding: 1px;
  box-sizing: border-box;
  background: red;
  color: #fff;

  font-size: 10px;
  text-align: center;
}
.idcard {
  width: 110px;
  margin-right: 10px;
  height: auto;
  display: inline-block;
  font-size: 12px;
}
.hzname {
  width: 50px;
  white-space: wrap;
  margin-right: 30px;
  display: inline-block;
  color: #000;
  font-size: 14px;
}
.hzxx {
}
.jtlist {
  width: 100%;
  height: calc(100% - 46px);
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
}
.hz1 {
  background: #f6f7f9;
  padding: 10px;
  width: 100%;
  margin-bottom: 15px;
  height: auto;
  box-sizing: border-box;

  border-radius: 10px;
}
.hz {
  background: #f6f7f9;
  padding: 10px;
  width: 100%;
  margin-bottom: 15px;
  height: auto;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
}
</style>